<template>
  <div class="showMain">
    <div class="about">
      ABOUT ME
    </div>
    <div class="desc">
      <div class="item"><div class="content"><div class="icon"><i class="fa fa-male"></i></div></div><div class="word">年龄/25岁</div></div>
      <div class="item"><div class="content"><div class="icon"><i class="fa fa-graduation-cap"></i></div></div><div class="word">学历/本科</div></div>
      <div class="item"><div class="content"><div class="icon"><i class="fa fa-registered"></i></div></div><div class="word">坐标/上海</div></div>
      <div class="item"><div class="content"><div class="icon"><i class="fa fa-qrcode"></i></div></div><div class="word">状态/在职</div></div>
    </div>
    <div class="end">
      <ul>
        <li>1.一年全职前端开发经验，熟练掌握Vue.js</li>
        <li>2.掌握JavaScript,了解Node.js，模块化开发</li>
        <li>3.高效的自学能力,具备独立分析解决问题能力</li>
        <li>4.强烈的自我驱动力,代码强迫症患者</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'third'
}
</script>

<style scoped lang="stylus">
  .showMain
    position: absolute;
    background: url("https://20181106.oss-cn-beijing.aliyuncs.com/3.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    font-family cursive
    overflow: hidden;
    .about
      color #fff
      position absolute
      top 18%
      left 50%
      transform translateX(-50%)
      font-size 3rem
      font-family sans-serif
    .desc
      width 100%
      height 28%
      position absolute
      top 33%
      padding 0 20%
      display flex
      .item
        width 15%
        .word
          color: #fff;
          text-align center
          font-size 1.3rem
          padding-top 0.5rem
        .content
          width 100px
          height 100px
          border 1px solid #fff
          background-color rgba(0,0,0,.3)
          margin 0 auto
          border-radius 50%
          .icon
            color white
            margin 0 auto
            padding-top 20px
            font-size 3.2rem
            text-align center
            &:hover
              font-size 4rem
              padding-top 15px
    .end
      position absolute
      width 100%
      height 30%
      background-color rgba(0,0,0,.1)
      color #fff
      padding 0 33%
      font-size 1.3rem
      bottom 10%
      li
        margin-top 1rem
</style>
